import tinymce from 'tinymce/tinymce'
import { v4 as uuid } from 'uuid'
import store from '../store'
import { updateFormula, updateInlineFormula } from './dom'

const commands = [
  {
    commandName: 'formulaInsertContent',
    commandAction: (editor, _ui, { data, latex = '' }) => {
      // const variables = getVariablesFromLatex(latex)
      var image = new Image()
      image.src = data.img
      image.onload = function () {
        const nodeId = store.state.xmleditor.editingFormulaId
        const node = tinymce.activeEditor.getDoc()?.querySelector(`[data-id="${nodeId}"]`)
        if (nodeId && node) {
          updateFormula(nodeId, image, latex)
          return
        }
        const width = parseInt(image.width)
        const height = parseInt(image.height)
        editor.insertContent(`
          <div class="formula" 
            contenteditable="false" 
            data-type="formula" 
            data-latex="${latex}"
            data-unit=""
            data-formula-number="1" 
            data-id="${uuid()}"
            data-image-width="${width}" 
            data-image-height="${height}"
          >
            <div class="img-wrapper irremovable" data-formula-number="1">
              <img contenteditable="true" 
                style="margin-left: calc(50% - ${width / 4}px);" 
                width="${width / 2}"
                height="${height / 2}"
                src="${image.src}" 
                data-img-latex="${latex}">
              <div class="formula-unit irremovable" contenteditable="false"></div>
              <div class="dotline irremovable" contenteditable="false" style="height: ${height / 4}px"></div>
            </div>
          </div>
      `)
        setTimeout(() => editor.fire('updateFormulaNumber'))
      }
    }
  },
  {
    commandName: 'figureFormulaInsertContent',
    commandAction: (editor, _ui, image) => {
      const width = parseInt(image.width)
      const height = parseInt(image.height)
      editor.insertContent(`
          <div class="formula" 
            contenteditable="false" 
            data-type="formula" 
            data-unit=""
            data-formula-number="1" 
            data-id="${uuid()}"
            data-image-width="${width}" 
            data-image-height="${height}"
          >
            <div class="img-wrapper irremovable" data-formula-number="1">
              <img contenteditable="true" 
                style="margin-left: calc(50% - ${width / 4}px);" 
                width="${width / 2}"
                height="${height / 2}"
                src="${image.src}">
              <div class="formula-unit irremovable" contenteditable="false"></div>
              <div class="dotline irremovable" contenteditable="false" style="height: ${height / 4}px"></div>
            </div>
          </div>
      `)
      setTimeout(() => editor.fire('updateFormulaNumber'))
    }
  },
  {
    commandName: 'inlineFormulaInsertContent',
    commandAction: (editor, _ui, { data, latex = '' }) => {
      var image = new Image()
      image.src = data.img
      image.onload = function () {
        const nodeId = store.state.xmleditor.editingFormulaId
        if (nodeId) {
          updateInlineFormula(nodeId, image, latex)
          return
        }
        const width = parseInt(image.width / 2)
        const height = parseInt(image.height / 2)
        editor.insertContent(`
          <img contenteditable="true" 
            data-type="inline_formula"
            data-id="${uuid()}"
            width="${width}"
            height="${height}"
            src="${image.src}" 
            data-latex="${latex}">
          `)
      }
    }
  }
]

export default function (editor) {
  commands.forEach((item) => {
    editor.addCommand(item.commandName, (...params) => item.commandAction(editor, ...params))
  })
}

/** 先不处理
function getVariablesFromLatex(str) {
  function filterArray(arr) {
    return arr.filter((item) => /[a-zA-Z]/.test(item) && !item.includes('='))
  }

  function removeDuplicates(arr) {
    return Array.from(new Set(arr))
  }
  const regex = /{([^{}]+|{[^{}]*})+}/g
  const result = str.match(regex)
  const result2 = []
  for (let i = 0; i < result.length; i++) {
    const regex3 = /[^{}]+/g
    const result3 = result[i].match(regex3)
    for (let j = 0; j < result3.length; j++) {
      result2.push(result3[j])
    }
  }

  return removeDuplicates(filterArray(result2))
}
 */
